<template>
    <div class="box">
        <h3>vuex的使用</h3>
        <pre>
        1. 通过 npm install vuex -S
        2. 基于 vuex 语法创建仓库对象 【options Api】
            import { createStore } from 'vuex'
            const store = createStore({})
        3. 在vue模块化项目的引导文件(main.js)中集成创建的参考
            store = { install:Function }
            app.use(store)
        4. vuex的基础使用 
        </pre>
        <p>vuex-$store.state.msg:{{ $store.state.msg }}</p>
        <p>computed-msg:vuex-$store.state.msg:{{ msg }}</p>
        <!-- <input type="button" value="setMsg" @click=" $store.state.msg ='111111' "> -->
        <input type="button" value="setMsg" @click=" updateMsg( Math.random() ) ">
        <input type="button" value="setMsg" @click=" setMsg( Math.random() ) ">

        <br>

        <p>vuex-$store.getters.newMsg:{{ $store.getters.newMsg }}</p>
        <p>computed-msg:vuex-$store.getters.newMsg:{{ newMsg }}</p>

        <br>

        <input type="button" value="触发loadMsg" @click="initMsg()">
        <input type="button" value="触发loadMsg" @click="loadMsg({test:1})">


        <hr>
        <ChildPageA></ChildPageA>
        <hr>
        <ChildPageB></ChildPageB>
    </div>
</template>

<script>
import { mapState,mapGetters,mapMutations,mapActions } from "vuex";
// console.log( mapState(["msg","info"]) )
//   { msg:function }

import ChildPageA from "./components/ChildPageA.vue";
import ChildPageB from "./components/ChildPageB.vue";

export default {
    components:{
        ChildPageA,ChildPageB
    },
    computed:{
        // msg(){
        //     return this.$store.state.msg
        // }
        ...mapState(["msg"]),
        ...mapGetters(["newMsg"])
    },
    methods:{
        ...mapMutations(["setMsg"]),
        ...mapActions(["loadMsg"]),
        updateMsg(nv){
            this.$store.commit("setMsg",nv)
        },
        initMsg(){
            this.$store.dispatch("loadMsg",{ pageSize:4,pageNum:1 })
        }
    }
}
</script>

<style lang="scss" scoped>

</style>